<template>
    <div class="Father">
        <h3>父组件</h3>
        <div class="content">
            <Category>
                <template v-slot:s2>
                    <ul>
                        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
                    </ul>
                </template>
                <template v-slot:s1>
                    <h2>热门游戏推荐</h2>
                </template>
            </Category>
            <Category>
                <template v-slot:s1>
                    <h2>今日美食推荐</h2>
                </template>
                <template v-slot:s2>
                    <img :src="imgUrl">
                </template>
            </Category>
            <Category>
                <template #s1>              <!-- 简写形式 -->
                    <h2>今日影视推荐</h2>
                </template>
                <template #s2>
                    <img :src="imgurl">
                </template>
            </Category>
        </div>
    </div>
</template>

<script lang="ts" setup name="Father">
    import Category from "./Category.vue";
    import {ref,reactive} from "vue";
    //数据
    let games = reactive([
        {id:"lsfdig01",name:"原神"},
        {id:"lsfdig02",name:"星穹铁道"},
        {id:"lsfdig03",name:"绝区零"},
        {id:"lsfdig04",name:"鸣潮"}
    ])
    let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
    let imgurl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
</script>

<style scoped>
    .Father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
    .content{
        display: flex;
        justify-content: space-evenly;
    }
    img{
        width: 100%;
    }
    h2{
        background-color: orange;
        text-align: center;
        font-size: 20px;
        font-weight: 800px;
    }
</style>